<template>
  <div class="articleOriginClass">
    <Row class="searchRowClass rowClass">
      <Input search enter-button="搜索" class="searchInputClass" @on-search="findArticleData" size="large"/>
      <Button style="position: absolute;right:10px;bottom:10px;" icon="ios-create-outline" type="info" @click="createArticle()">写文章</Button>
      <div style="position: absolute;left:10px;bottom:10px;">
        排序：
        <RadioGroup v-model="sortModel">
          <Radio label="最新发表"></Radio>
          <Radio label="最多收藏"></Radio>
          <Radio label="最多阅读"></Radio>
        </RadioGroup>
      </div>
    </Row>
    <Row class="listRowClass rowClass">
      <List item-layout="vertical">
        <ListItem v-for="item in data" :key="item.id">
          <div class="titleClass" @click="openArticle(item)">{{item.title}}</div>
          <div class="descriptionClass">{{item.description}}</div>
          <!-- {{ item.content }} -->
          <template slot="action">
            <li><Icon type="ios-chatbubbles-outline" /> {{item.dzSize}}</li>
            <li><Icon type="ios-star-outline" /> {{item.scSize}}</li>
            <li><Icon type="ios-thumbs-up-outline" /> {{item.ydSize}}</li>
          </template>
        </ListItem>
      </List>
    </Row>
  </div>
</template>
<script>
import { findArticleData } from '@/api/article'

export default {
  data () {
    return {
      sortModel: '最新发表',
      data: []
    }
  },
  methods: {
    openArticle(item) {
      window.localStorage.paraData = JSON.stringify({item: item})
      window.open('#/writeArticle', '_blank')
    },
    /**
     * @Autor: zhangwei
     * @Date: 2021-01-26 17:20:50
     * @Description: 创建文章
     */
    createArticle() {
      window.localStorage.paraData = null
      window.open('#/writeArticle', '_blank')
    },
    /**
     * @Autor: zhangwei
     * @Date: 2021-01-27 16:49:36
     * @Description: 获取文章
     */
    findArticleData() {
      findArticleData().then(res => {
        if(res.data.state=='ok') {
          this.data = res.data.data
        }else {
          this.$Notice.error({title:'提示', desc: res.data.msg})
        }
      })
    }
  },
  mounted() {
    this.findArticleData()
  }
}
</script>
<style>
.titleClass {
  cursor: pointer;
  margin-bottom: 12px;
  color: rgba(0,0,0,.85);
  font-size: 16px;
  line-height: 24px;
}
.descriptionClass {
  color: rgba(0,0,0,.45);
  font-size: 14px;
  line-height: 22px;
}
.articleOriginClass {
  background: #f5f7f9;
  height: 100%;
  width: 100%;
  text-align: left;
}
.searchInputClass {
  width: 450px !important;
  position: absolute !important;
  left: 30%;
  top: 25%;
}
.searchRowClass {
  position: relative;
  height: calc(17% - 15px);
  margin-bottom: 15px;
}
.listRowClass {
  padding: 16px;
  height: 83%;
}
.rowClass {
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
  overflow-y: auto;
}
</style>